* {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
  }
  header {
  .box {
    height: 50px;
    background-color: #222;
    .container {
      padding: 0;
      // 导航栏
      .navbar-header {
        .navbar-brand {
          padding: 0 15px;
          display: flex;
          align-items: center;
        }
      }
      .navbar {
        border: none;
        margin-bottom: 0;
      }
      .navbar-wrapper {
        .navbar-brand {
          padding: 0 15px;
          > img {
            width: 130px;
          }
        }
      }
    }
  }
  

  .carousel-inner {
      width: 100%;
      div{
      > img {
          width: 100%;
      }
    }
  }

  // ipad端 >= 768px   < 992px
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .box {
      height: 100%;
      .navbar-wrapper {
        .navbar {
          margin-bottom: 0;
        }
        // 语言
        #navbar {
          .dropdown {
            position: absolute;
            top: 0;
            right: 80px;
          }
        }
      }
    }
    }
  // 移动端 < 768px
  @media screen and (max-width: 767px) {
    .box {
      height: 100%;
      .navbar-wrapper {
        .container {
          .navbar {
            margin-bottom: 0;
          }
          // 语言
          #navbar {
            position: absolute;
            left: 0;
            top: 50px;
            background-color: #222;
            width: 100vw;
          }
        }
      }
    }
  }

}

main {
  background-color: #fbfaf7;
  .container {
    .left{
        // margin-left: 0px;
        // margin-right: 0px;
      >.col-md-8 {
        >.row {
          >.text1 {
            margin-top: 105px;
            font-size: 47.75px;
            color: #0078d7;
          }
          >.text2 {
            margin-top: 33px;
            font-size: 30.22px;
            color: #666666;
          }
          .text3_box{
            margin-top: 79px;
            >.text3 {
              >.image {
                  margin-bottom: 33px;
                img {
                  width: 64px;
                  height: 64px;
                }
              }
              .text3_one {
                font-size: 19.24px;
                color: #333;
                margin-bottom: 13px;
              }
              .text3_two {
                font-size: 14px;
                color: #666;
                line-height: 26px;
              }
            }
          }

          .text3_twobox{
            margin-top: 19px;
            >.text3 {
                >.image {
                    margin-bottom: 33px;
                  img {
                    width: 64px;
                    height: 64px;
                  }
                }
              .text3_one {
                margin-bottom: 13px;
                font-size: 19.24px;
                color: #333;
              }
              .text3_two {
                font-size: 14px;
                color: #666;
                line-height: 26px;
              }
            }
          }
        }
      }
      .bt_image {
          margin-top: 8.4375rem;
        padding: 8.5rem 0 1.875rem;
      }
    }
  }
  .box1 {
      background-color: #fff;
      .content1{
          .i{
              margin: 7.125rem 0 6.5625rem;
              display: flex;
              justify-content: space-around;
              align-items: center;
              .i_l {
                height: 36.25rem;
                  img {
                      padding-top: 6.3125rem;
                  }
              }
              .i_r {
                    height: 36.25rem;
                  .youshi {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                      .ys_one {
                          color: #8fc31f;
                          font-size: 3.00375rem;
                          font-weight: bold;
                      }
                      .ys_two,.ys_three,.ys_four
                      ,.ys_five {
                          display: flex;
                          justify-content: left;
                          align-items: center;
                          div:nth-of-type(2) {
                              margin-left: .825rem;
                          }
                      }
                  }
              }
        }
    }
  }

  .box2 {
      background-color: #0079d7;
      .chanpin {
          .cp_1 {
            .cp_one {
                margin: 7.125rem 0 5rem;
                font-size: 3.053125rem;
                color: #fffefe;
            }
          }
          .cp_2 {
              margin-bottom: 5rem;
            .cp_two {
                display: flex;
                align-items: center;
                div {
                    img {
                        width: 4.8125rem;
                        height: 4.8125rem;
                    }
                }
                .two_b {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    div:nth-of-type(1) {
                        margin-bottom: .9625rem;
                        font-size: 2.055625rem;
                        color: #fffefe;
                    }
                    div:nth-of-type(2) {
                        line-height: 2.075rem;
                        font-size: .875rem;
                        color: #fffefe;
                    }
                }
            }
        }
      }
  }

  .box3 {
    .container {
      .youxi {
          padding-bottom: 3.5rem;
          .yx_one {
              display: flex;
              justify-content: space-between;
              margin-top: 5.3125rem;
              margin-bottom: 3.125rem;
              div:nth-of-type(1) {
                  font-size: 2.165625rem;
              }
              div:nth-of-type(2) {
                  font-size: .875rem;
            }
          }
          .yx_two {
            .two_one {
                margin-left: -1.875rem;
                display: flex;
                justify-content: center;
                .one_o {
                    img {
                        width: 23.4375rem;
                        height: 12.8125rem;
                    }
                }
                .two_t{
                    margin-left: 10.125rem;
                    width: 35.875rem;
                    height: 13.875rem;
                    display: flex;
                    flex-direction: column;
                    .two_w {
                        display: flex;
                        justify-content: space-around;
                        .two_o {
                            margin-right: 3.1875rem;
                            div {
                                img{
                                    width: 4.5rem;
                                    height: 4.5rem;
                                }
                            }
                            p{
                                font-size: .875rem;
                                text-align: center;
                            }
                        }
                    }
                    }
                }
            }
        }
      }
  }

  .box4 {
      background-color: #f4f4f4;
      .row {
          .b_one {
              margin-top: 2.625rem;
              justify-content: center;
          }
          .b_two {
              margin-top: 2rem;
              margin-bottom: 4.1875rem;
              display: flex;
              flex-direction: column;
              div:nth-of-type(1) {
                  margin-bottom: 25px;
              }
              div {
                img {
                    margin-right: 1.125rem;
                }
              }
          }
      }
  }

  .box5 {
    background-color: #3b3b3b;
      .container{
                .row {
                    .dibu {
                        display: flex;
                        justify-content: space-between;
                        .db_one {
                            margin: 2.1875rem 0;
                            div {
                                span {
                                    font-size: .875rem;
                                    color: #9798a0;
                                }
                            }
                            span {
                                font-size: .6875rem;
                                color: #9798a0;
                            }
                        }
                        .db_two {
                            margin-top: 2.5rem;
                            display: flex;
                            div{
                                position: relative;
                                margin-right: 1.375rem;
                                &:hover::before {
                                    content: '';
                                    position: absolute;
                                    top: -9.8rem;
                                    left: -2.35rem;
                                    background: url(../img/index/二维码.png) no-repeat
                                    top/cover;
                                    width: 8.9375rem;
                                    height: 9.5rem;
                                }
                            }
                        }
                    }
                }
            }
        }


}


 // ipad端 >= 768px   < 992px
 @media screen and (min-width: 768px) and (max-width: 991px) {
    main {
        .row {
            margin-left: 0px;
            margin-right: 0px;
        }
        .container {
            .left {
                .bt_image {
                    padding: 0;
                    margin-top: 0;
                    margin-left: 150px;
                }
            }
        }

        .box1 {
            .content1 {
                .i {
                    display: block;
                    .i_l {
                        display: flex;
                        justify-content: center;
                    }
                    .i_r {
                        position: relative;
                        .youshi {
                            position: absolute;
                            left: 50%;
                            margin-left: -20rem;
                        }
                    }
                }
            }
        }

        .box2 {
            .chanpin {
                .cp_1 {
                  .cp_one {
                      margin: 3.125rem 0;
                  }
                }
                .cp_2 {
                    margin-bottom: 0;
                  .cp_two {
                      display: flex;
                      align-items: center;
                      margin-bottom: 1.625rem;
                      div {
                          img {
                              width: 4.8125rem;
                              height: 4.8125rem;
                          }
                      }
                      .two_b {
                          display: flex;
                          flex-direction: column;
                          justify-content: space-around;
                          div:nth-of-type(1) {
                              margin-bottom: .9625rem;
                              font-size: 2.055625rem;
                              color: #fffefe;
                          }
                          div:nth-of-type(2) {
                              line-height: 2.075rem;
                              font-size: .875rem;
                              color: #fffefe;
                          }
                      }
                  }
              }
            }
        }

        .box3 {
            .container{
                .youxi {
                    .yx_one {
                        justify-content: center;
                        div:nth-of-type(1) {
                            display: inline-block;
                        }
                        div:nth-of-type(2) {
                            display: none;
                        }
                    }
                    .yx_two {
                        .two_one {
                            flex-direction: column;
                            .one_o {
                                display: flex;
                                justify-content: center;
                                img {
                                    width: 50rem;
                                    height:25rem;
                                }
                            }
                            .two_t {
                                margin-top: 2.125rem;
                                margin-left: 2.875rem;
                                width: 100%;
                                height: 100%;
                                .two_w {
                                    margin-top: 1rem;
                                    justify-content: space-between;
                                }
                            }
                        }
                    }
                }
            }
        }

        .box4 {
            background-color: #f4f4f4;
            .row {
                .b_one {
                    margin-top: 2.625rem;
                    justify-content: center;
                }
                .b_two {
                    margin-top: 2rem;
                    margin-bottom: 4.1875rem;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    flex-wrap: wrap;
                    div:nth-of-type(1) {
                        margin-bottom: 0;
                    }
                    div {
                        width: 48.25rem;
                      img {
                          margin-top: 1rem;
                          margin-right: 1.125rem;
                      }
                    }
                    
                }
            }
        }

    }
}


// 移动端 < 768px
@media screen and (max-width: 768px) {
    main {
        .container {
            .left {
                .box {
                    .row {
                        margin-left: 15px;
                        margin-right: 15px;
                        >.text1 {
                            margin-top: 15px;
                            font-size: 30.75px;
                            color: #0078d7;
                          }
                          >.text2 {
                            margin-top: 15px;
                            font-size: 20.22px;
                            color: #666666;
                          }
                        .text3_box {
                            margin-top: 15px;
                            .text3 {
                                .image {
                                    img {
                                        width: 64px;
                                        height: 64px;
                                    }
                                }
                                .text3_one{
                                    width: 167px;
                                    height: 24px;
                                    margin-left: 15px;
                                    margin-bottom: 5px;
                                }
                                .text3_two {
                                    margin-left: 15px;
                                    margin-bottom: 5px;
                                }
                            }
                        }

                        .text3_twobox {
                            .text3 {
                                .text3_one{
                                    margin-left: 15px;
                                    margin-bottom: 5px;
                                }
                                .text3_two {
                                    margin-left: 15px;
                                    margin-bottom: 5px;
                                }
                            }
                        }
                    }
                }

                .bt_image {
                    margin: 0;
                    padding: 0; 
                    img{
                        display: none;
                        
                    }
                }
            }
        }


        .box1 {
            .content1 {
                .i {
                    display: block;
                    margin: 1.625rem 0;
                    .i_l {
                        height: 0;
                        img {
                            display: none;
                        }
                    }
                    .i_r {
                        position: relative;
                        .youshi {
                            position: absolute;
                            left: 50%;
                            margin-left: -15rem;
                        }
                    }
                }
            }
        }

        .box2 {
            .chanpin {
                margin-left: 3.25rem;
                .cp_1 {
                    
                  .cp_one {
                      margin: 3.125rem 0;
                  }
                }
                .cp_2 {
                    margin-bottom: 0;
                  .cp_two {
                      display: flex;
                      align-items: center;
                      margin-bottom: 1.625rem;
                      div {
                          img {
                              width: 4.8125rem;
                              height: 4.8125rem;
                          }
                      }
                      .two_b {
                          display: flex;
                          flex-direction: column;
                          justify-content: space-around;
                          div:nth-of-type(1) {
                              margin-bottom: .9625rem;
                              font-size: 2.055625rem;
                              color: #fffefe;
                          }
                          div:nth-of-type(2) {
                              width: 25rem;
                              line-height: 2.075rem;
                              font-size: .875rem;
                              color: #fffefe;
                          }
                      }
                  }
              }
            }
        }

        .box3 {
            .container{
                .youxi {
                    .yx_one {
                        justify-content: center;
                        div:nth-of-type(1) {
                            display: inline-block;
                        }
                        div:nth-of-type(2) {
                            display: none;
                        }
                    }
                    .yx_two {
                        .two_one {
                            flex-direction: column;
                            .one_o {
                                display: flex;
                                justify-content: center;
                            }
                            .two_t {
                                width: 100%;
                                height: 100%;
                                align-items: center;
                                margin-left: 1em;
                                .two_w {
                                    margin-top: 1rem;
                                    width: 300px;
                                    flex-wrap: wrap;
                                    justify-content: center;
                                }
                            }
                        }
                    }
                }
            }
        }

        .box4 {
            background-color: #f4f4f4;
            .container {
                .row {
                    .b_one {
                        margin-top: 2.625rem;
                        justify-content: center;
                    }
                    .b_two {
                        margin-left: 4rem;
                        margin-top: 2rem;
                        margin-bottom: 4.1875rem;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        flex-wrap: wrap;
                        div:nth-of-type(1) {
                            margin-bottom: 0;
                        }
                        div {
                            width: 33.25rem;
                          img {
                              margin-top: 1rem;
                              margin-right: 1.125rem;
                          }
                        }
                        
                    }
                }
            }
        }
    }
  }

